<template>
  <i class="md-icon" :class="iconClass" :style="iconStyle">
    <slot></slot>
  </i>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  name?: string;
  size?: string | number;
  color?: string;
}

const props = withDefaults(defineProps<Props>(), {
  size: '16px',
  color: ''
});

const iconClass = computed(() => {
  return props.name ? `md-icon-${props.name}` : '';
});

const iconStyle = computed(() => {
  const style: Record<string, string> = {};
  
  if (props.size) {
    const size = typeof props.size === 'number' ? `${props.size}px` : props.size;
    style.fontSize = size;
    style.width = size;
    style.height = size;
  }
  
  if (props.color) {
    style.color = props.color;
  }
  
  return style;
});
</script>

<style lang="scss" scoped>
.md-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
</style>